@import './variables.scss';

.el-button {
  &.el-button--primary {
    background-color: #2569c3;
    border-color: #2569c3;

    &.is-disabled {
      background-color: #a0cfff;
      border-color: #a0cfff;

      &:hover {
        background-color: #a0cfff;
        border-color: #a0cfff;
      }
    }

    &:hover {
      background-color: #2c7be5;
      border-color: #2c7be5;
    }
  }
}

.fty-button {
  cursor: pointer;

  &.button-primary {
    color: #2c7be5;
    border-color: #2c7be5;

    &:hover {
      color: #484ff3;
    }
  }

  &.button-danger {
    color: darkred;
    border-color: darkred;

    &:hover {
      color: red;
    }
  }

  &.button-grey {
    color: $tipColor;
    border-color: $tipColor;

    &:hover {
      color: $mainColor;
    }
  }

  &.button-grey-danger {
    color: $tipColor;
    border-color: $tipColor;

    &:hover {
      color: darkred;
    }
  }

  &.button-disabled {
    color: $tipColor;
    border-color: $tipColor;

    &:hover {
      color: $tipColor;
      cursor: not-allowed;
    }
  }

  &.button-circular {
    background-color: white;
    border-radius: 50%;
    padding: 0.2em;
    border: 1px solid;
  }

}
